<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="../jquery-easyui-1.6.6/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="../jquery-easyui-1.6.6/themes/icon.css">
    <script type="text/javascript" src="../jquery-easyui-1.6.6/jquery.min.js"></script>
    <script type="text/javascript" src="../jquery-easyui-1.6.6/jquery.easyui.min.js"></script>
</head>
<body>
    <div class="easyui-panel" title="用户登陆" style="width:100%;max-width:400px;padding:30px 60px;">
        <form id="ff" method="post">
            <div style="margin-bottom:20px">
                <input class="easyui-textbox" name="username" style="width:100%" data-options="label:'用户名:',required:true" id="username">
            </div>
            <div style="margin-bottom:20px">
                <input class="easyui-textbox" name="password" style="width:100%" data-options="label:'密码:',required:true" id="password">
            </div>
        </form>
        <div style="text-align:center;padding:5px 0">
            <a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitForm()" style="width:80px">确定</a>
            <a href="javascript:void(0)" class="easyui-linkbutton" onclick="clearForm()" style="width:80px">取消</a>
        </div>
    </div>
    <script>
     function submitForm() {
            $('#ff').form('submit', {
                onSubmit: function () {
                    return $(this).form('enableValidation').form('validate');
                }
            });
        }

        function clearForm() {
            $('#ff').form('clear');
        }
        //登陆时发送ajax请求查看是否和数据库中的数据一致
              var $username = $('username').val();
                var $password = $('password').val();
                $.ajax({
                    type: 'post',
                    url: 'http://localhost:3000/users/list',
                    data: { //将用户名和密码传输给后端
                        name: $username,
                        pass: $password
                    },
                    success: function (data) { //请求成功，接收后端返回的值
                        if (!data) { //用户名或者密码错误
                            $('.error').html('用户名或者密码错误');
                            $('.password').val('');
                        } else { //成功,存cookie,跳转到首页
                            window.location.href="../index.html";
                        }
                    }
                })
    </script>
</body>
</html>